import * as THREE from '../../build/three.module.js';
import Stats from '../../jsm/libs/stats.module.js';
import { TrackballControls } from '../../jsm/controls/TrackballControls.js';

const scene = new THREE.Scene();
scene.background = new THREE.Color(0x050505);

const camera = new THREE.PerspectiveCamera(65, innerWidth / innerHeight, .01, 100);
camera.position.z = 4;

const gmt = new THREE.IcosahedronBufferGeometry(.1, 1);
const colors = [];
for(let i = 0; i < gmt.attributes.position.count; i += 1) {
  colors.push( Math.random(), Math.random(), Math.random() )
};
gmt.setAttribute('color', new THREE.Float32BufferAttribute(colors, 3));

const mtl = new THREE.MeshBasicMaterial({
  color: 0xff0000,
  vertexColors: THREE.VertexColors
});

const instances = 100,
      instancePositions = [],
      instanceQuaternions = [],
      instanceScales = [];

for(let i = 0; i < instances; i += 1) {
  const mesh = new THREE.Mesh( gmt, mtl );
  scene.add(mesh);

  const position = mesh.position;
  const quaternion = mesh.quaternion;
  const scale = mesh.scale;

  position.set(Math.random() * 2 - 1, Math.random() * 2 - 1, Math.random() * 2 - 1);
  quaternion.set(Math.random() * 2 - 1, Math.random() * 2 - 1, Math.random() * 2 - 1, Math.random() * 2 - 1);
  quaternion.normalize();
  scale.set(Math.random() * 2, Math.random() * 2, Math.random() * 2);
  
  instancePositions.push(position.x, position.y, position.z);
  instanceQuaternions.push(quaternion.x, quaternion.y, quaternion.z, quaternion.w);
  instanceScales.push(scale.x, scale.y, scale.z);
}

const igmt = new THREE.InstancedBufferGeometry();
igmt.attributes.position = gmt.attributes.position;
igmt.attributes.color = gmt.attributes.color;

igmt.setAttribute('instancePosition', new THREE.InstancedBufferAttribute(new Float32Array(instancePositions), 3));
igmt.setAttribute('instanceQuaternion', new THREE.InstancedBufferAttribute(new Float32Array(instanceQuaternions), 4));
igmt.setAttribute('instanceScale', new THREE.InstancedBufferAttribute(new Float32Array(instanceScales), 3));

const imtl = new THREE.ShaderMaterial({
  uniform: {},
  vertexShader: document.getElementById('vertexShader').textContent,
  fragmentShader: document.getElementById('fragmentShader').textContent,
  vertexColors: true,
});

const iMesh = new THREE.Mesh(igmt, imtl);
iMesh.position.x = .1;
scene.add(iMesh);

const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setPixelRatio(devicePixelRatio);
renderer.setSize(innerWidth, innerHeight);
document.body.appendChild(renderer.domElement);

const controls = new TrackballControls(camera, renderer.domElement);

const stats = new Stats();

const render = () => {
  controls.update();

  renderer.render(scene, camera);
}

const animate = () => {
  requestAnimationFrame(animate);

  stats.update();
  render();
}
animate();

const handleWindowResize = () => {
  camera.aspect = innerWidth / innerHeight;
  camera.updateProjectionMatrix();

  renderer.setSize(innerWidth, innerHeight);
}
window.addEventListener('resize', handleWindowResize, false);